import { LitElement, html } from "lit";
import { until } from "lit/directives/until.js";

class UntilDirective extends LitElement {
    static get properties() {
        return {
            messageRequest: { type: String }
        };
    }

    constructor() {
        super();
        this._fetchMessage();
    }

    render() {
        return html`
      <div>
        <!--
          在呈现承诺时，在加载期间显示占位符内容可能很有用。
        你可以使用until指令。第一个参数应该是渲染的承诺，
        第二个可选参数是加载期间呈现的模板。
        -->
        ${until(
            this.messageRequest,
            html`
            Loading...
          `
        )}

        <button @click="${() => this._fetchMessage()}">
          Fetch message
        </button>
      </div>
    `;
    }

    // Fake fetching something from an API, returns after 2sec
    _fetchMessage() {
        this.messageRequest = new Promise(resolve => {
            setTimeout(() => resolve("Hello world"), 2000);
        });
    }
}

customElements.define("until-directive", UntilDirective);
